<template>
  <div>
    <PlusPage
      :columns="tableConfig"
      :table="{ adaptive: true, hasIndexColumn: true }"
      :request="getList"
    >
      <!-- 表格标题 -->
      <template #table-title>
        <!-- 导入白名单 -->
        <el-button type="primary" @click="onImportWhiteList">导入白名单</el-button>

        <!-- 同步银行结果 -->
        <el-button type="primary" @click="onSyncBankResult">同步银行结果</el-button>
      </template>

      <!-- 自定义table header -->
      <template #plus-header-_waybillQuerySwitch="scoped">
        <div flex-center>
          <div mr-4>{{ scoped.label }}</div>
          <el-switch v-model="waybillQuerySwitch" />
        </div>
      </template>
    </PlusPage>

    <!-- 白名单导入对话框 -->
    <ImportDialog v-model:visible="importDialogVisible" />
  </div>
</template>

<script lang="ts" setup>
import type { WhiteListModel } from '@/api/type'
import { companyApi } from '@/api'
import { tableConfig } from './config'
import ImportDialog from './cpns/import-dialog.vue'

const { getList } = usePage<WhiteListModel>({ fetchData: companyApi.getWhiteList })

// 标题运单查询开关
const waybillQuerySwitch = ref(false)

// 导入白名单
const importDialogVisible = ref(false)
const onImportWhiteList = () => {
  importDialogVisible.value = true
}

// 同步银行结果
const onSyncBankResult = () => {
  console.log('second')
}
</script>
